<template>
<div id="loginwrap">
  <a-form :form="form" class="formwrap">
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="账号"
    >
      <a-input
        v-decorator="[
          'userName',
          { rules: [{ required: true, message: '请输入您的账号' }] },
        ]"
        placeholder="输入账号"
      />
    </a-form-item>
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="密码"
    >
      <a-input
        v-decorator="[
          'Pwd',
          { rules: [{ required: true, message: '请输入您的密码' }] },
        ]"
        type="password"
        placeholder="输入密码"
      />
    </a-form-item>
    <a-form-item
      :label-col="formTailLayout.labelCol"
      :wrapper-col="formTailLayout.wrapperCol">
      <a-button type="primary" @click="check">
        登录
      </a-button>
    </a-form-item>
  </a-form>
</div>
</template>

<script>
import { fetchlogin } from '@api'
const formItemLayout = {
  labelCol: { span: 18 },
  wrapperCol: { span: 4 }
}
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 4, offset: 18 }
}
export default {
  data () {
    return {
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: 'dynamic_rule' })
    }
  },
  methods: {
    check () {
      fetchlogin(this.form.getFieldsValue()).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          localStorage.setItem('token', res.data.data.token)
          localStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo))
          this.$message.success('登录成功', 1, () => {
            this.$router.replace('/admin')
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scope>
#loginwrap{
  width: 100%;
  height: 100vh;
  background-image: url('../../assets/img/赛博朋克.png');
  background-repeat: no-repeat;
  background-size: cover;
  .formwrap{
    padding-top: 290px;
  }
}
</style>
